<template>
    <div>
        <transition name="fade">
            <div class="style-2" v-if="templateStyle ==='style-2'">
                <div class="course_common_box">
                    <div class="course-content">
                        <p class="content-title" v-if="contentInfo&&contentInfo.sentence">
                            {{contentInfo ? contentInfo.sentence : ''}}</p>
                        <ul class="option-group">
                            <li class="option" v-for="(item,index) in option" @click="getOption(item,index)"
                                :class="activeIndex===index&&'active'" v-if="item">
                                <em class="tb">{{item.english}}</em>
                            </li>
                        </ul>
                        <div class="content">
                            <div class="content-top">
                                <div class="top-sentence">
                                    <div class="sentence l2-m3-data" v-for="item in contentInfo.topSentences"
                                         v-html='getHtml(item)' @click="setOption($event)"
                                    ></div>
                                </div>
                            </div>
                            <div class="top-picture-one" v-if="contentInfo.images&&contentInfo.images.length===1">
                                <loadingImage :key="index" :src="addPrefixHost(item)"
                                              v-for="(item,index) in contentInfo.images"/>
                            </div>
                            <div class="top-picture-two" v-if="contentInfo.images&&contentInfo.images.length===2">
                                <loadingImage :key="index" :src="addPrefixHost(item)"
                                              v-for="(item,index) in contentInfo.images"/>
                            </div>
                            <div class="top-picture-three" v-if="contentInfo.images&&contentInfo.images.length===3">
                                <div class="ImgBg" v-for="(item,index) in contentInfo.images">
                                    <loadingImage :key="index" :src="addPrefixHost(item)"/>
                                </div>
                            </div>
                            <div class="content-bottom">
                                <div class="bottom-sentence">
                                    <div class="sentence l2-m3-data" v-for="item in contentInfo.bottomSentences"
                                         v-html='getHtml(item)' @click="setOption($event)"
                                    ></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <transition name="fade">
            <div class="style-3" v-if="templateStyle ==='style-3'">
                <div class="course_common_box">
                    <div class="course-content">
                        <ul class="content-word">
                            <li class="word-item" v-for="(item,index) in option" @click="getOption(item,index)"
                                v-if="item">
                                <div class="tb" :class="activeIndex===index&&'active'">
                                    {{item.english}}
                                </div>
                            </li>
                        </ul>
                        <h1 class="title" v-for="item in contentInfo.topSentences">{{item}}</h1>
                        <div class="content-picture">
                            <div v-for="item in contentInfo.images">
                                <loadingImage :src="addPrefixHost(item)"/>
                            </div>
                        </div>
                        <div class="content-sentence l3-m-word"
                             v-for="(item,index) in contentInfo.bottomSentences"
                             v-html='getHtml(item)' @click="setOption($event)"
                        >
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <transition name="fade">
            <div class="style-4" v-if="templateStyle ==='style-4'">
                <div class="course_common_box">
                    <div class="course-content">
                        <ul class="left-option">
                            <li class="option" v-for="(item,index) in option" @click="getOption(item,index)"
                                :class="activeIndex===index&&'active'" v-if="item">
                                <em class="tb">{{item.english}}</em>
                            </li>
                        </ul>
                        <div class="content-right course-content-sentence">
                            <div class="l4-m-word" ref="sentence">
                                <div class="list" v-for="(item,index) in contentInfo.topSentences"
                                     v-html='getHtml(item)' @click="setOption($event)">
                                </div>
                            </div>
                            <div class="top-picture-one" v-if="contentInfo.images&&contentInfo.images.length==1">
                                <loadingImage :key="index" :src="addPrefixHost(item)"
                                              v-for="(item,index) in contentInfo.images"/>
                            </div>
                            <div class="top-picture-two" v-if="contentInfo.images&&contentInfo.images.length>1">
                                <loadingImage :key="index" :src="addPrefixHost(item)"
                                              v-for="(item,index) in contentInfo.images"/>
                            </div>
                            <div class="bottom-gap">
                                <div class="l4-m-word" ref="word">
                                    <div class="list" v-for="(item,index) in contentInfo.bottomSentences"
                                         v-html='getHtml(item)' @click="setOption($event)">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    import {mapState, mapActions} from 'vuex';
    import loadingImage from '~/components/loadingImage';
    import R from 'ramda';
    import Vue from 'vue';

    export default {
        async fetch({isServer, redirect, store, params}) {
            (isServer || !params) && redirect("/learner/myCourse");
            params.extendData || await store.dispatch("index/course/index/setContentInfo", params);
        },
        asyncData({params}) {
            return {extendData: params.extendData}
        }, data() {
            return {
                answerArr: [],
                activeIndex: null,
                activeItem: null,
                toIndex: null,
                isUpdate: false,
                correctArr: [],
                errorMessage: ""
            }
        },
        methods: {
            ...mapActions('index/course/index', [
                'setAnswer'
            ]),
            getHtml(item) {
                let obj = item;
                let words = this.contentInfo ? this.contentInfo.words : '';
                if (obj) {
                    const re = /([^\[\]]+)(?=\])/g;
                    let arr = obj.match(re);
                    if (arr) {
                        for (let i = 0; i < arr.length; i++) {
                            if (arr[i] % arr[i] === 0) {
                                let key = this.answerArr[arr[i] - 1] || '';
                                let bindStyle = this.bindStyle || '';
                                obj = obj.replace(/\[[0-9]*]、?/, "<ul><li " + bindStyle + " class='en'>" + words[arr[i] - 1].pinyin + "</li><li class='cn'>" + words[arr[i] - 1].chinese + "</li><li class='gap' data-name='" + (arr[i] - 1) + "'>" + (key.english || '') + "</li></ul>");
                            }
                        }
                    }
                    return obj;
                }
            },
            setOption(e) {
                if (e.target.nodeName.toUpperCase() === "LI" && e.target.className === "gap") {
                    let target = e.target;
                    this.toIndex = target.getAttribute("data-name");
                    if (this.activeItem != null) {
                        if (!this.answerArr[this.toIndex]) {
                            Vue.set(this.answerArr, this.toIndex, this.activeItem);
                            this.option.splice(this.activeIndex, 1);
                            this.activeItem = null;
                            this.activeIndex = null;
                        } else {
                            this.option.splice(this.activeIndex, 1);
                            this.option.push(this.answerArr[this.toIndex]);
                            Vue.set(this.answerArr, this.toIndex, this.activeItem);
                            this.activeItem = null;
                            this.activeIndex = null;
                        }
                    } else {
                        if (this.answerArr[this.toIndex]) {
                            this.option.push(this.answerArr[this.toIndex]);
                        }
                        Vue.set(this.answerArr, this.toIndex, "");
                    }
                    this.Answer(this.toIndex);
                }
            }
            ,
            getOption(item, index) {
                this.activeIndex = index;
                this.activeItem = item;
            }
            ,
            Answer(Index) {
                let answer = false;
                Vue.set(this.correctArr, Index, this.answerArr[Index].order);
                if (this.contentInfo.answerOrder) {
                    for (let i = 0; i < this.contentInfo.answerOrder.length; i++) {
                        if (this.correctArr.toString() === this.contentInfo.answerOrder[i]) {
                            answer = true;
                        }
                    }
                }
                this.setAnswer({
                    answer: answer,
                    msg: this.errorMessage
                });
            }
            ,
            init() {
                this.$nextTick(_ => {
                    if (this.contentInfo.words) {
                        for (let i = 0; i < this.contentInfo.words.length; i++) {
                            this.errorMessage += this.contentInfo.words[i].chinese + "——" + this.contentInfo.words[i].english + "<br>";
                        }
                    }
                    this.setAnswer({
                        answer: false,
                        msg: this.errorMessage
                    });
                })
            }
        },
        created() {
        },
        mounted() {
            this.init();
        },
        watch: {
            contentInfo() {
//                当数据发生变化后执行动画效果
                this.isUpdate = true;
                const initData = {
                    answerArr: [],
                    activeIndex: null,
                    activeItem: null,
                    toIndex: null,
                    isUpdate: false,
                    correctArr: [],
                    errorMessage: ""
                };
                const init = (val, key) => {
                    this[key] = val;
                };
                R.forEachObjIndexed(init)(initData);
                setTimeout(_ => {
                    this.isUpdate = false;
                }, 600);
                this.init();
            },
        },
        computed: {
            option() {
                const arr = [];
                if (this.content.words) {
                    for (let i = 0; i < this.content.words.length; i++) {
                        arr.push(this.content.words[i]);
                    }
                }
                return arr.sort(function () {
                    return Math.random() - 0.5
                });
            },
            contentInfo() {
                return this.courseExtendInfo || this.extendData || this.contentData;
            },
            ...mapState('index/course/index', {
                courseExtendInfo: state => state.courseExtendInfo,
                contentData: state => state.contentInfo.content,
                templateStyle: state => state.templateStyle,
                pinyinSwitch: state => state.pinyinSwitch,
                bindStyle: state => state.bindStyle,
                content: state => state.contentInfo ? state.contentInfo.content : {},
                data: state => state.contentInfo,
            }),
        },
        components: {
            loadingImage,
        }
    }
</script>
<style lang="less">
    .style-4 {

        .l4-m-word {
            font-size: 22px;
            max-width: 8rem;

            .list {
                margin: 0 0.2rem 0rem 0;
                display: inline-block;
                font-size: 18px;
                ul {
                    display: inline-block;
                    margin: 0 10px;

                    li {
                        margin-top: 2px;
                    }

                }
                .cn {
                    color: rgb(160, 32, 32);
                    font-size: 28px;
                    font-weight: 700;
                }

                .en {
                    font-size: 0.2rem;
                }

                .gap {
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    display: inline-block;
                    min-width: 1.2rem;
                    height: 0.4rem;
                    line-height: 0.4rem;
                    border-radius: 0.05rem;
                    background: linear-gradient(-315deg, #935378, #733A6D);
                    font-size: 0.22rem;
                    color: white;
                    cursor: pointer;
                    box-shadow: 0 0 0rem 0.01rem white, -0.05rem 0.05rem 0.15rem black inset;
                    vertical-align: bottom;
                    padding: 0 0.05rem;
                }

            }
        }
    }

    .style-3 {
        .l3-m-word {

            ul {
                display: inline-block;
            }
            .gap {
                display: inline-block;
                width: 1.2rem;
                height: 0.45rem;
                line-height: .45rem;
                background: #681515;
                border-left: 0.02rem solid #901D1C;
                border-bottom: 0.02rem solid #901D1C;
                -webkit-box-shadow: -0.03rem 0.05rem 0.2rem black inset;
                box-shadow: -0.03rem 0.05rem 0.2rem black inset;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                color: white;
                font-size: 0.22rem;
                vertical-align: bottom;
                cursor: pointer;
                padding: 0rem .02rem;
                margin: 0 .05rem;
            }
        }
    }

    .style-2 {
        .l2-m3-data {
            display: inline-block;
            margin: 0 5px;
            ul {
                display: inline-block;
                margin: 0 5px;
                .cn {
                    font-size: 28px;
                }
                .gap {
                    display: inline-block;
                    font-size: 0.22rem;
                    min-width: 1.2rem;
                    height: 0.42rem;
                    line-height: 0.42rem;
                    border-radius: 0.05rem;
                    box-shadow: 0 0 0 0.01rem #fff, inset 0.02rem 0.01rem 0.05rem #000;
                    cursor: pointer;
                    background: transparent;
                    padding: 0 0.05rem;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    vertical-align: bottom;
                }
            }
        }
    }
</style>
<style lang="less" scoped>
    .style-2 {

        .course_common_box {
            text-align: center;

            .course-content {
                display: inline-block;
                position: relative;
            }
            .content-title {
                font-size: 22px;
                width: 750px;
                margin: 0 auto 10px auto;
            }
            .option-group {
                display: inline-block;
                vertical-align: middle;
                position: absolute;
                right: 105%;
                top: 50%;
                transform: translate(0, -50%);
            }

            .option {
                width: 1.4rem;
                min-height: 0.45rem;
                box-sizing: border-box;
                font-size: 0.22rem;
                background: linear-gradient(#ffffff 0, #ACACAC 90%);
                box-shadow: 0.02rem 0.03rem 0.06rem 0 black;
                margin: .2rem 0rem;
                cursor: pointer;
                border-radius: 5px;
                display: table;
                &.active {
                    background: linear-gradient(#333333 100%, #ffffff 55%);
                    color: white;
                }
            }
            .content {
                display: inline-block;
                vertical-align: middle;
                max-width: 7.8rem;
            }
            .top-picture-one {
                display: inline-block;
                vertical-align: middle;
                border-radius: 10px;
                margin: 2px 0;
                img {
                    max-width: 4rem;
                    max-height: 2rem;
                    border-radius: 10px;
                }

            }
            .top-picture-two {
                display: inline-block;
                vertical-align: middle;
                margin: 5px 0;
                img {
                    vertical-align: middle;
                    width: 220px;
                    height: 160px;
                    border-radius: 10px;
                    margin: 0 10px;
                    display: inline-block;
                }

            }
            .top-picture-three {
                display: inline-block;
                vertical-align: middle;
                margin: 5px 0;
                .ImgBg {
                    vertical-align: middle;
                    width: 220px;
                    height: 160px;
                    margin: 0 10px;
                    background: url("~~assets/img/main_content/course/l2-picture-frame.png") center center no-repeat;
                    background-size: 100% 100%;
                    display: inline-block;
                    img {
                        width: 91%;
                        height: 88.5%;
                        margin: .07rem .05rem 0 0;
                        border-radius: .05rem;
                    }
                }

            }
            .content-bottom {
                margin-top: .1rem;
            }
            .content-top {
                margin-bottom: .1rem;
            }
            .bottom-sentence .sentence {
                display: inline-block;
                font-size: 18px;
                margin: 0 .07rem;
            }
            .top-sentence .sentence {
                display: inline-block;
                margin: 0 30px;
                font-size: 22px;
                vertical-align: top;
            }
        }

    }

    .style-3 {

        .course_common_box {
            margin: 0 auto;
            text-align: center;

            .course-content {
                display: inline-block;
                position: relative;
            }

            .title {
                font-size: 22px;
            }

            .content-picture {
                margin: 10px auto;

                img {
                    max-width: 6rem;
                    max-height: 2rem;
                    border-radius: 5px;
                }

            }

            .content-sentence {
                font-size: 22px;

            }
            .content-word {
                margin-top: 15px;
                position: absolute;
                right: 110%;
                top: 50%;
                transform: translate(0, -50%);
            }

            .word-item {
                width: 1.4rem;
                padding: 0.03rem;
                box-sizing: border-box;
                background: #BE2C23;
                font-size: 0.22rem;
                min-height: .5rem;
                color: white;
                background: linear-gradient(#B43C0B 0, #901D1C 90%);
                cursor: pointer;
                margin: 10px 10px;
                display: table;
                .tb {
                    border: 0.01rem solid #FB984B;
                    box-sizing: border-box;
                    width: 100%;
                    &.active {
                        background: linear-gradient(#901D1C 0, #D9151B 90%);
                    }
                }

            }
        }

    }

    .style-4 {

        .course_common_box {
            margin: 0 auto;
            text-align: center;

            .course-content {
                display: inline-block;
                position: relative;
                min-width: 600px;
            }

            .left-option {
                display: inline-block;
                vertical-align: middle;
                min-width: 170px;
                position: absolute;
                right: 105%;
                top: 50%;
                transform: translate(0, -50%);
            }

            .content-right {
                display: inline-block;
                vertical-align: middle;
            }

            .option {
                width: 1.6rem;
                min-height: 0.45rem;
                border-radius: 5px;
                background: linear-gradient(#9D5678 0, #7F4577 90%);
                font-size: 22px;
                box-shadow: 0 0.03rem 0.03rem black;
                color: white;
                cursor: pointer;
                display: table;
                margin: 35px 0;
                padding: 0 2px;
            }

            .option:hover {
                background: linear-gradient(#6944B5 0, #353C8D 90%);
            }
            .active {
                background: linear-gradient(#6944B5 0, #353C8D 90%);
            }
            .top-picture-one {
                display: inline-block;
                vertical-align: middle;
                border-radius: 10px;
                margin: 2px 0;
                img {
                    width: 4rem;
                    height: 2rem;
                    border-radius: 10px;
                    border: 2px solid black;
                }

            }
            .top-picture-two {
                display: inline-block;
                vertical-align: middle;
                margin: 5px 0;
                img {
                    vertical-align: middle;
                    width: 220px;
                    height: 160px;
                    border-radius: 10px;
                    margin: 0 10px;
                    display: inline-block;
                    border: 2px solid black;
                }

            }
            .bottom-gap {
                max-width: 8rem;
                margin: 0 auto;
                min-height: 0.7rem;
            }

        }

    }
</style>
